<template>
	<view class="container">
		<view class="back-page" @click="backToPage">
			<uni-icons type="left" :size="30" color="#000"></uni-icons>
		</view>
		
		<view class="top-text">Determine your image and nickname Can be replaced anytime, anywhere</view>
		

		<swiper class="header" circular previous-margin="24%" next-margin="268rpx" :current="current" @change="changeIndex">
		      <swiper-item v-for="(item, index) in images" :key="index">
		           <!-- 当前所在滑块的 index == index 放大 -->
		        <view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
					<image :src="item.nvImg"></image>
					<view v-if="current == index" class="cricle"></view>
				</view>
		    </swiper-item>
		</swiper>
		
		<view class="name-box"><input type="text" v-model="name"></view>
		
		<view class="choose-btn">sure</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					{
						nvImg:'/static/nv-1.png',
						nanImg:'/static/nan-1.png',
					},{
						nvImg:'/static/nv-2.png',
						nanImg:'/static/nan-2.png',
					},{
						nvImg:'/static/nv-3.png',
						nanImg:'/static/nan-3.png',
					},{
						nvImg:'/static/nv-4.png',
						nanImg:'/static/nan-4.png',
					}
				],
				current:0,
				name:'John Els'
			}
		},
		methods: {
			changeIndex(e){
				this.current = e.detail.current
			},
			backToPage(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #E9EFF5;
		padding-top: 30rpx;
		.back-page{
			position: absolute;
			top: 2rpx;
			left: 20rpx;
			z-index: 999;
		}
		
		.cricle{
			width: 160rpx;
			height: 62rpx;
			border-radius: 50%;
			transform: scaleX(1.3);
			position: absolute;
			left: 28%;
			bottom: -20rpx;
			background-color: #D9D9D9;
		}
		.top-text{
			margin-top: 90rpx;
			width: 100%;
			padding: 0 90rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 48rpx;
		}
		.header {
			margin: 120rpx auto 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 660rpx;
			.slide-image {
				position: relative;
				width: 372rpx;
				height: 560rpx;
				image{
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 2;
				}
			}
		 
			.active { 
				// 中间放大动画
				transform: none;
				transition: all 0.2s ease-in 0s;
			  }
		 
			.quiet {
				// 两边缩小动画
				transform: scale(0.5);
				opacity: 0.4;
				transition: all 0.5s ease-in 0s;
			  }
		}
		.name-box{
			margin: 0 auto;
			width: 554rpx;
			height: 80rpx;
			border-bottom: 2rpx solid #999;
			input{
				width: 100%;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				color: #52A5F3;
				font-size: 32rpx;
			}
		}
		.choose-btn{
			margin: 120rpx auto 0;
			width: 358rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background-color: #52A5F3;
			border-radius: 24rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}
</style>